<template>
  <view class="wrap">
    <view class="box bd1">
      <view class="bigBtn" @click="start">
        <view style="font-size: 50upx" v-if="!isStart">开始</view>
        <view style="font-size: 80upx; font-weight: 900" v-if="isStart">{{
          params.fetalHeart
        }}</view>
        <view
          v-if="isStart"
          style="
            font-size: 30upx;
            position: absolute;
            bottom: 85upx;
            right: 60upx;
          "
          >次</view
        >
      </view>
      <view class="cancelBtn" v-if="isStart" @tap="tapCancel"> 取消 </view>
      <!-- 			<view class="confirmBtn" v-if="isStart" @tap="tapConfirm">
				完成
			</view> -->
    </view>
    <view class="count flex flex-j-a">
      <view>
        <view style="margin: 40upx 0">剩余时间</view>
        <view style="font-size: 90upx; font-weight: 300"
          >{{ minutes }}:{{ seconds }}</view
        >
      </view>
      <view>
        <view style="margin: 40upx 0">实际点击</view>
        <view
          class="flex"
          style="font-size: 90upx; font-weight: 300; justify-content: center"
        >
          <view>{{ params.clickNum }}</view>
          <view style="font-size: 40upx; margin-top: 15upx">次</view>
        </view>
      </view>
    </view>
    <view style="text-align: center; margin: 30px 0 10px">
      <image
        src="../../../static/img/c18a9e32321842a7b569fe1041f52ff5.png"
        mode="widthFix"
        style="width: 160upx; height: 160upx"
      ></image>
    </view>
    <view
      style="width: 70%; text-align: center; margin: 0 auto; color: #18c7e1"
      class="hei"
    >
      宝宝开始活动了，宝妈可以听听胎教音乐和胎教故事放松心情~
      <span class="explain" @tap="goExplain">帮助说明</span>
    </view>
    <u-modal
      v-model="show"
      :content="context"
      @confirm="close()"
      show-cancel-button="true"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isStart: false,
      show: false,
      context: "倒计时未结束，记录将不作为有用的数据",
      timer: 3600,
      tt: null,
      minutes: "60",
      seconds: "00",
      five: 300,
      timers: "",
      params: {
        clickNum: 0,
        fetalHeart: 0,
        endTime: "",
        startTime: "",
      },
      timeExper: 0,
      clickCount: 1,
    };
  },
  onNavigationBarButtonTap(e) {
    if (e.index == 0) {
      uni.navigateTo({
        url: "/pages/main/pregnant/heart-record",
      });
    }
  },
  onLoad() {
    let self = this;
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
        uni.setBackgroundColor({
          backgroundColor: "#1B1C1E", // 窗口的背景色
          backgroundColorTop: "#222222", // 顶部窗口的背景色
          backgroundColorBottom: "#333333", // 底部窗口的背景色
        });
        uni.setBackgroundTextStyle({
          textStyle: "dark",
        });
      } else {
        console.log("当前为普通模式");
        uni.setBackgroundColor({
          backgroundColor: "#F8F8F8", // 窗口的背景色
          backgroundColorTop: "#F8F8F8", // 顶部窗口的背景色
          backgroundColorBottom: "#F8F8F8", // 底部窗口的背景色
        });
      }
    },
    CountDown() {
      if (this.timeExper <= 0) {
        this.clickCount = 1;
        this.timeExper = this.five;
        this.timeExper--;
      } else {
        this.timeExper--;
      }

      if (this.timer >= 0) {
        this.minutes = Math.floor(this.timer / 60);
        this.seconds =
          Math.floor(this.timer % 60) < 10
            ? "0" + Math.floor(this.timer % 60)
            : Math.floor(this.timer % 60);
        // if (maxtime == 5 * 60) alert("还剩5分钟");
        --this.timer;
      } else {
        this.tapConfirm();
        clearInterval(this.tt);
      }
    },
    onBackPress(e) {
      uni.switchTab({
        url: "/pages/home/home",
      });
      return true;
    },
    start() {
      //debugger
      if (!this.isStart) {
        this.timeExper = this.five;
        this.CountDown();
        this.tt = setInterval((s) => {
          this.CountDown();
        }, 1000);
        this.params.startTime = this.formatDate(
          new Date(),
          "yyyy-MM-dd hh:mm:ss"
        );
      }
      if (this.isStart) {
        ++this.params.clickNum;
        if (this.clickCount > 0) {
          this.timeExper = this.five;
          this.timeExper--;
          this.clickCount--;
          ++this.params.fetalHeart;
        }
      }
      this.isStart = true;
    },
    tapCancel() {
      clearInterval(this.tt);
      clearInterval(this.timers);
      if (this.timer >= 0) {
        this.show = true;
      }
    },
    close() {
      uni.redirectTo({
        url: "/pages/main/pregnant/heart-detection",
      });
    },
    tapConfirm() {
      this.params.endTime = this.formatDate(new Date(), "yyyy-MM-dd hh:mm:ss");
      //console.log(this.params)
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config.post("/heartRate/addHeartRate", this.params).then((res) => {
        uni.hideLoading();
        if (res.data.code === 200) {
          this.tapCancel();
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    // 去帮助说明
    goExplain() {
      uni.navigateTo({
        url: "/pages/main/pregnant/heart-detection-explain",
      });
    },
    // 时间格式修改
    formatDate(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      let o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds(),
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : this.padLeftZero(str)
          );
        }
      }
      return fmt;
    },
    padLeftZero(str) {
      return ("00" + str).substr(str.length);
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  height: 40%;
  padding-top: 1upx;
  background-color: #18c7e1;
  position: relative;
  padding-bottom: 1upx;
}

.topTips {
  width: 80%;
  text-align: center;
  color: #fff;
  margin: 15% auto;
}

.bigBtn {
  width: 250upx;
  height: 250upx;
  margin: 15% auto;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: #18c7e1;
  position: relative;
}

.cancelBtn {
  width: 100upx;
  height: 100upx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1upx solid #fff;
  color: #fff;
  position: absolute;
  z-index: 0;
  right: 80upx;
  bottom: 50upx;
}

.confirmBtn {
  width: 100upx;
  height: 100upx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1upx solid #fff;
  color: #fff;
  position: absolute;
  z-index: 0;
  left: 80upx;
  bottom: 50upx;
}

.count {
  margin: 0 auto;
  color: #777;
  font-size: 36upx;
  line-height: 65upx;
  text-align: center;
}

.explain {
  position: fixed;
  bottom: 50upx;
  right: 50upx;
  color: #18c7e1;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .wrap {
    background-color: #1b1c1e !important;
    height: calc(100vh - var(--window-top));
  }
  .bd {
    background-color: #1b1c1e !important;
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .t1 {
    color: #ccc !important;
  }
}
</style>